import Taro, { Component } from '@tarojs/taro'
import { View, Text, Swiper, SwiperItem, Image } from '@tarojs/components'
import './homepage.css'
import { AtGrid, AtButton, AtTabBar, AtIcon,AtList, AtListItem } from 'taro-ui'
import reactMixin from 'react-mixin'
import myJs from './homepageJs.js'
import app from '../../../main.js'

export default class HomePage extends Component {

  config = {
    navigationBarTitleText: '首页',
  }

  constructor() {
    super(...arguments);
    this.state = {
      doctor: {},
      advertisements: {
        offset: 0,
        length: 25,
        items: []
      },
      tbar_current: 0,
      is_show_info: true,
      isShowOfficial: true
    };
  }
  
  //未读条数
  getNoRead () {
    let me = this
    let data = {}
    app.get('web/patientInquiry/doctor_inquiry_unread_amount', data, (res)=>{
      me.setState({
        noread:res.data.result.unread_amount
     })
    })
  }

  init() {
    this.getDoctor();
    this.allAdvertisement();
    this.getNoRead();
  }

  closeOfficial() {
    this.setState({
      isShowOfficial: false
    })
  }

  componentDidShow() {
    this.init();
    Taro.showShareMenu();
  }

  handleClick (value) {
    this.setState({
      tbar_current: value
    })
    // if (value == 1) {
    //   app.redirectTo('../../dynamic/pages/dongtaishouye/dongtaishouye');
    // }
    // if (value == 2) {
    //   app.redirectTo('../../center/pages/personalcenter/personalcenter');
    // } 

    if (value == 1) {
      app.redirectTo('../../center/pages/personalcenter/personalcenter');
    } 
  }

  //跳转到问卷调查列表页
  inquiry(){
    console.log(123)
    app.navigateTo('../inquiryList/inquiryList')
  }
 
  //栅格跳转
  go = (item, index) => {
    let is_open_inquiry_no_direction = this.state.doctor.is_open_inquiry_no_direction //非定向
    let is_open_inquiry_direction = this.state.doctor.is_open_inquiry_direction //定向
    let is_open_inquiry_group = this.state.doctor.is_open_inquiry_group//团队
    switch (index) {
      case 0:
        let docid = this.state.doctor.id
        this.navigateTo('../medicalhomepage/medicalhomepage?id='+docid);
        break;
      case 1: 
        app.navigateTo('../../wenzhen/pages/consultpage/consultpage'+'?open1='+is_open_inquiry_direction+'&open2='+is_open_inquiry_no_direction+'&open3='+is_open_inquiry_group);
        break;
      case 2:
        app.navigateTo('../../flow/pages/suifangHuanzheLieBiao/suifangHuanzheLieBiao');
        break;
      case 3:  
        let id = this.state.doctor.prl_doctor_id
        if(id == null){
              app.toast('您暂未开放该权限，请联系工作人员');
              return; 
        }else{
          this.navigateTo('../../prl/pages/yishengdingdanliebiao/yishengdingdanliebiao?id='+id);       
        }
      break;
    }
  }

  closeInfo() {
    this.setState({
      is_show_info: false
    });
  }

  render() {

    return (
      <View className='home-page'>
        {
          (this.state.doctor.auth_status == '审核通过' && this.state.is_show_info)
          &&
          <View className='auth_info auth_info_success'>
            <View className='info_title'>您的注册认证已审核通过</View>
            <AtIcon value='close-circle' size='18' color='#ffffff' className='info_icon' onClick={this.closeInfo.bind(this)}></AtIcon>
          </View>
        }
        {
          (this.state.doctor.auth_status == '审核不通过' && this.state.is_show_info)
          &&
          <View className='auth_info auth_info_fail'>
            <View className='info_title'>您的注册认证审核不通过</View>
            <AtIcon value='close-circle' size='18' color='#ffffff' className='info_icon' onClick={this.closeInfo.bind(this)}></AtIcon>
          </View>
        }
        {
          (this.state.doctor.auth_status == '申请中' && this.state.is_show_info)
          &&
          <View className='auth_info auth_info_correct'>
            <View className='info_title'>您的注册认证正在审核中</View>
            <AtIcon value='close-circle' size='18' color='#ffffff' className='info_icon' onClick={this.closeInfo.bind(this)}></AtIcon>
          </View>
        }
        {
          (this.state.doctor.auth_status == '资质通过' && this.state.is_show_info)
          &&
          <View className='auth_info auth_info_success' onClick={this.navigateTo.bind(this, '/pages/center/pages/zizhibeian/zizhibeian')}>
            <View className='info_title'>您的资质认证已审核通过</View>
            <AtIcon value='close-circle' size='18' color='#ffffff' className='info_icon' onClick={this.closeInfo.bind(this)}></AtIcon>
          </View>
        }
        {
          (this.state.doctor.auth_status == '资质不通过' && this.state.is_show_info)
          &&
          <View className='auth_info auth_info_fail' onClick={this.navigateTo.bind(this, '/pages/center/pages/zizhibeian/zizhibeian')}>
            <View className='info_title bottom_line'>您的资质认证审核不通过，{!app.isEmpty(this.state.doctor.zizhi_reason) ? (this.state.doctor.zizhi_reason+'，') : ''}去查看</View>
            <AtIcon value='close-circle' size='18' color='#ffffff' className='info_icon' onClick={this.closeInfo.bind(this)}></AtIcon>
          </View>
        }
        {
          (this.state.doctor.auth_status == '资质审核中' && this.state.is_show_info)
          &&
          <View className='auth_info auth_info_correct' onClick={this.navigateTo.bind(this, '/pages/center/pages/zizhibeian/zizhibeian')}>
            <View className='info_title bottom_line'>您的资质认证正在审核中，去查看</View>
            <AtIcon value='close-circle' size='18' color='#ffffff' className='info_icon' onClick={this.closeInfo.bind(this)}></AtIcon>
          </View>
        }
        <Swiper
          className='the_swiper'
          indicatorColor='#999'
          indicatorActiveColor='white'
          circular
          indicatorDots
          autoplay>
          {this.state.advertisements.items.map((item, index) =>
            <SwiperItem key={index}>
              <View ><Image className='banner_img' onClick={navigateTo2.bind(this, item.url)} src={item.image}></Image></View>
            </SwiperItem>
          )}
        </Swiper>
        <View className='doctor'>
          <View className='left'>
            <Image className='head_img' src={app.getPath(this.state.doctor.head_image)} onClick={this.navigateTo.bind(this, '../../center/pages/personalcenter/personalcenter')}></Image>
            <View className='welcome' onClick={this.navigateTo.bind(this, '../../center/pages/personalcenter/personalcenter')}>hi，{this.state.doctor.name}医生</View>
          </View>
          <View className='to_btn'><AtButton type='primary' size='small' onClick={this.navigateTo.bind(this, '../../center/pages/personalcenter/personalcenter')}>我的名片</AtButton></View>
        </View>
        <View className='gridParent'>
            <AtGrid className='main-box' onClick={this.go} columnNum={4} data={
                [
                  {
                    image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
                    value: '病历管理'
                  },
                  {
                    image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
                    value: '患者咨询'
                  },
                  {
                    image: 'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png',
                    value: '随访患者'
                  },
                  {
                    image: 'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png',
                    value: 'PRL订单'
                  },
                ]
             } />
            <View className='myBadge'>
              {
                this.state.noread > 0 
                ?
                <Text>{this.state.noread > 99 ? '99+' : this.state.noread}</Text>
                :
                null
              }
            </View>
        </View>
        {/* <View className='inquiry'>
        <AtListItem title='问卷调查' arrow='right' onClick={this.inquiry.bind(this)}/>
        </View> */}
        <View className={this.state.isShowOfficial ? 'official_view' : 'hidden'}>
          <View><official-account></official-account></View>
          <AtIcon value='close-circle' size='18' color='#aaaaaa' className='info_icon official_icon' onClick={this.closeOfficial.bind(this)}></AtIcon>
        </View>
        <AtTabBar
          fixed
          tabList={[
            { title: '首页', iconType: 'home' },
            // { title: '动态', iconType: 'message'},
            { title: '我的', iconType: 'user' }
          ]}
          onClick={this.handleClick.bind(this)}
          current={this.state.tbar_current}
        /> 
      </View>
    )
  }
}
reactMixin.onClass(HomePage, myJs);
